
import { Layout, Menu, Breadcrumb, Button,Modal } from 'antd';
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import '../static/css/Adminindex.css'
import React ,{useState,useEffect}from 'react'
import { traverseTwoPhase } from 'react-dom/test-utils';
import {Route, Router,Redirect,withRouter} from 'react-router-dom'
import AddArticle from './AddArticle'
import UpdateArticle from './UpdateAritcle'
import ArticleList from './ArticlesList'
import MainPage from './MainPage'
import LeaveMessage from './LeaveMessage'
import moment from 'moment'
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
var todayTimeInterval

const today = moment(); // 当天日期
 function AdminIndex(props) {
    const [collapsed,setCollpased] = useState(false)
    const [pageIndex,setPageIndex] = useState('')
    const [todayTime, setTodayTime] = useState(moment()) //修改日志的日期
    useEffect(() => {
      todayTimeInterval = setInterval(()=>{
          setTodayTime(moment())
          // console.log(todayTime)
        },1000)
    }, [])

    const  onCollapse = collapsed =>{
        setCollpased(collapsed)
    } 
    const handleClickArticle= e=>{
        if(e.key==='AddArticle'){
            props.history.push('/AdminIndex/add')
            setPageIndex('添加文章')
        }else if(e.key==='ArticleList'){
            props.history.push('/AdminIndex/list')
            setPageIndex('文章列表')
        }else if(e.key==='MainPage'){
            props.history.push('/AdminIndex')
            setPageIndex('主页')
        }else if(e.key==='LeaveMessage'){
          props.history.push('/AdminIndex/LeaveMessage')
          setPageIndex('留言管理')
      }
    }
    function logOut(){
      // props.history.push('/')
      Modal.confirm({
        title: '退出请求',
        icon: <ExclamationCircleOutlined />,
        content: '确认要退出登录吗？',
        okText: '确认',
        cancelText: '取消',
        onOk(){
          clearInterval(todayTimeInterval)
          props.history.push('/')
        }
      });
    }
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="MainPage" icon={<PieChartOutlined />} onClick = {handleClickArticle}>
              主页
            </Menu.Item>
            <SubMenu key="sub1" 
            onClick = {handleClickArticle}
            icon={<UserOutlined />} 
            title="文章管理"
            >
              <Menu.Item key="ArticleList" >文章列表</Menu.Item>
              <Menu.Item key="AddArticle">添加文章</Menu.Item>
            </SubMenu>
            <Menu.Item key="LeaveMessage" icon={<FileOutlined />} onClick = {handleClickArticle}>
              留言管理
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          {/* <Header className="site-layout-background" style={{ padding: 0 }} /> */}
          <Content style={{ margin: '0 16px' }}>
            <div className="pageHeader">
              
              <Breadcrumb style={{ float:'left',margin: '16px 10px', font_size:'1rem' }}>
                <Breadcrumb.Item>后台管理系统</Breadcrumb.Item>
                <Breadcrumb.Item>{pageIndex}</Breadcrumb.Item>
              </Breadcrumb>
              
              <div className='loginInfo'>
                欢迎！梨苏橙～  
                <a onClick={logOut}>退出登录</a>
              </div>
              <div className='todayInfo'>
                当前时间是{todayTime.format(' YYYY年MM月DD日 下午 HH:mm:ss  ')}  
              </div>
            </div>

            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                    <Route path='/AdminIndex' exact component={MainPage}></Route>
                    <Route path='/AdminIndex/add' exact component={AddArticle}></Route>
                    <Route path='/AdminIndex/update/:id' exact component={UpdateArticle}></Route>
                    <Route path='/AdminIndex/list' exact component={ArticleList}></Route>
                    <Route path='/AdminIndex/leaveMessage' exact component={LeaveMessage}></Route>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>此网站由梨苏橙制作维护</Footer>
        </Layout>
      </Layout>
    );
}
export default AdminIndex